<template>
  <third-register></third-register>
  <basic-container>
    <avue-data-box :option="option"></avue-data-box>
  </basic-container>
  <basic-container>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div ref="pieChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div ref="barChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <div ref="sensorChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </basic-container>
  <basic-container>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div ref="lineChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </basic-container>
</template>

<script>
import thirdRegister from '@/components/third-register/main.vue'
import * as echarts from 'echarts';

export default {
  name: "wel",
  components: {
    thirdRegister
  },
  data() {
    return {
      option: {
        span: 6,
        data: [
          {
            title: '实例数',
            count: 8,
            icon: 'el-icon-cpu',
            color: 'rgb(120, 144, 156)',
            href: '/iot/category',
            click: function (item) {
              console.log(item);
            },
          },
          {
            title: '品类数',
            count: 28,
            icon: 'el-icon-connection',
            color: 'rgb(124, 144, 181)',
            href: '/iot/category',
            click: function (item) {
              console.log(item);
            },
          },
          {
            title: '产品数',
            count: 50,
            icon: 'el-icon-monitor',
            color: 'rgb(199, 178, 222)',
            href: '/iot/product',
            click: function (item) {
              console.log(item);
            },
          },
          {
            title: '设备数',
            count: 99,
            icon: 'el-icon-iphone',
            color: 'rgb(143, 169, 191)',
            href: '/iot/device',
            click: function (item) {
              console.log(item);
            },
          },
        ]
      },
    }
  },
  mounted() {
    this.initPieChart();
    this.initBarChart();
    this.initLineChart();
    this.initSensorChart()
  },
  methods: {
    initPieChart() {
      const pieChart = echarts.init(this.$refs.pieChart);
      const option = {
        title: {
          text: '设备分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '设备状态',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
              {value: 78, name: '在线'},
              {value: 10, name: '离线'},
              {value: 5, name: '故障'},
              {value: 5, name: '维修'},
              {value: 1, name: '待机'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      pieChart.setOption(option);
    },
    initBarChart() {
      const barChart = echarts.init(this.$refs.barChart);
      const option = {
        title: {
          text: '设备日活跃度',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }]
      };
      barChart.setOption(option);
    },
    initSensorChart() {
      const sensorChart = echarts.init(this.$refs.sensorChart);
      // 假设这些是传感器的初始值
      const initialData = [180, 10, 2, 10, 50, 0]; // 初始数据更接近现实的传感器读数

      const option = {
        title: {
          text: '设备实时数据',
          left: 'center'
        },
        xAxis: {
          max: 'dataMax'
        },
        yAxis: {
          type: 'category',
          data: ['在线', '离线', '维修', '故障', '待机', '其他'],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 5 // 显示所有5个状态
        },
        series: [
          {
            realtimeSort: true,
            type: 'bar',
            data: initialData,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            }
          }
        ],
        legend: {
          show: true
        },
        animationDuration: 0,
        animationDurationUpdate: 1000, // 更新速度
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
      };

      function run() {
        for (let i = 0; i < initialData.length; ++i) {
          // 随机决定是增加还是减少，并且增加的幅度更大
          if (Math.random() > 0.5) {
            initialData[i] += Math.round(Math.random() * 10 + 10);
          } else {
            initialData[i] = Math.max(0, initialData[i] - Math.round(Math.random() * 10 + 10));
          }
        }
        sensorChart.setOption(option);
      }


      setTimeout(function () {
        run();
      }, 0);
      setInterval(function () {
        run();
      }, 3000); // 每3秒更新一次数据
    },
    initLineChart() {
      const lineChart = echarts.init(this.$refs.lineChart);
      const lineOption = {
        title: {
          text: '产品趋势',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['智能家居', '工业设备', '医疗设备'],
          left: 'left'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '智能家居',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '工业设备',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '医疗设备',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ]
      };
      lineChart.setOption(lineOption);
    },

  },
};
</script>

<style>

</style>

